<div class="box mb-10">
  <div class="row">
    {{#if (and editing (gt alertRules.length 1))}}
      <div class="pull-right">
        {{#if canRemoveRule}}
          <button class="btn bg-transparent text-small vertical-middle" {{action removeRule model}}>
            {{t 'alertPage.newOrEdit.removeAlert'}}
          </button>
        {{/if}}
      </div>
    {{else}}
      <!-- 28px is the height of the button, no jumpy -->
      <div style="height: 28px;"></div>
    {{/if}}
  </div>
  <div class="row">
    <div class="col span-1 text-right">
      <div class="pt-10">
        <label>{{t 'formNameDescription.name.label'}}</label>
      </div>
    </div>
    <div class="col span-10">
      {{input type="text" value=model.name placeholder=(t 'formNameDescription.name.placeholder')}}
    </div>
  </div>
  <section class="row">
    <div class="col span-1 text-right">
      <div class="pt-10">
        <label>
          {{#if (eq model._targetType 'metric')}}
            {{t 'alertPage.newOrEdit.whenAn'}}
          {{else}}
            {{t 'alertPage.newOrEdit.whenA'}}
          {{/if}}
        </label>
      </div>
    </div>

    <div class="col span-10">

      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            {{radio-button selection=model._targetType value="systemService"}} {{t 'alertPage.targetTypes.systemService'}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{searchable-select
              content=systemServices
              class="form-control"
              value=model.systemServiceRule.condition
              placeholder=(t 'alertPage.newOrEdit.systemServicePlaceholder')
              readOnly=(not-eq model._targetType 'systemService')
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            <span class="pr-10"> {{radio-button selection=model._targetType value="normalEvent"}} {{t 'alertPage.newOrEdit.normal'}} </span>
          </label>
          <label class="acc-label">
            {{radio-button selection=model._targetType value="warningEvent"}} {{t 'alertPage.newOrEdit.warning'}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{searchable-select
              content=resourceKinds
              class="form-control"
              value=model.eventRule.resourceKind
              placeholder=(t 'alertPage.newOrEdit.resourcePlaceholder')
              readOnly=(not-eq isEventTarget true)
          }}
        </div>
        <div class="col span-1 text-right"> {{t 'alertPage.targetTypes.event'}} </div>
      </div>

      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            {{radio-button selection=model._targetType value="node"}} {{t 'alertPage.targetTypes.node'}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{searchable-select
              content=nodes
              class="form-control"
              value=model.nodeRule.nodeId
              optionValuePath="id"
              optionLabelPath="displayName"
              placeholder=(t 'alertPage.newOrEdit.nodePlaceholder')
              readOnly=(not-eq model._targetType 'node')
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            {{radio-button selection=model._targetType value="nodeSelector"}} {{t 'alertPage.targetTypes.nodeSelector'}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{#if (eq model._targetType 'nodeSelector')}}
            {{form-key-value
                addActionLabel="alertPage.addSelectorLabel"
                initialMap=model.nodeRule.selector
                changed=(action (mut model.nodeRule.selector))
            }}
          {{else}}
            <button {{action "noop"}} style="cursor:not-allowed;" class="btn bg-disabled icon-btn">
              <span class="darken"><i class="icon icon-plus text-small"/></span>
              <span>{{t 'alertPage.addSelectorLabel'}}</span>
            </button>
          {{/if}}
        </div>
      </div>
      <div class="row">
        <div class="col span-2">
          <label class="acc-label" style={{expressionStyle}}>
            {{radio-button selection=model._targetType value="metric" disabled=(not monitoringEnabled)}} {{t 'alertPage.newOrEdit.expression.label'}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{alert-select
              content=metricsContent
              class="form-control"
              value=model.metricRule.expression
              readOnly=(or (not-eq model._targetType 'metric') graphLoading)
              placeholder="Select a metric"
              allowCustom=true
          }}
          {{#if (eq graphStatus 'noData')}}
            <p class="text-error text-small mt-0 mb-0">{{t 'alertPage.newOrEdit.expression.noData'}}</p>
          {{else if (eq graphStatus 'error')}}
            <p class="text-error text-small mt-0 mb-0">{{t 'alertPage.newOrEdit.expression.error'}}</p>
          {{/if}}
        </div>
      </div>
    </div>
  </section>
  <hr/>
  <section class="row">
    <div class="col span-1 text-right">
      <div style={{verbStyles}}>{{if isEventTarget (t 'alertPage.newOrEdit.happens') (t 'alertPage.newOrEdit.is')}}</div>
    </div>
    {{#if (eq model._targetType 'metric')}}
      <div class="row">
        <div class="col span-2 mt-0">
          {{searchable-select
              content=operatorContent
              class="form-control"
              value=model.metricRule.comparison
              readOnly=(not-eq model._targetType 'metric')
          }}
        </div>
        <div class="col span-2 mt-0">
          {{input-number class="form-control"
                          value=model.metricRule.thresholdValue
                          readOnly=(not-eq model._targetType 'metric')
                          placeholder="e.g. 10"
                          min=0
          }}
        </div>
        <div class="col span-1 text-right">
          <div style={{verbStyles}}>{{t 'alertPage.newOrEdit.for'}}</div>
        </div>
        <div class="col span-4 mt-0">
          {{searchable-select
              content=durationContent
              class="form-control"
              value=model.metricRule.duration
              readOnly=(not-eq model._targetType 'metric')
          }}
        </div>
      </div>
      <hr/>
      {{#if (eq graphStatus 'success')}}
        <div class="row">
          {{alert-chart
            key=model.id
            series=chartOption.series
            loading=graphLoading
            threshold=model.metricRule.thresholdValue
            tag=model.tag
          }}
        </div>
      {{/if}}
    {{else}}
      <div class="col span-10">
      {{#if (eq model._targetType 'systemService')}}
        <label class="acc-label">
          {{radio-button selection="whatever" value="whatever"}} {{t 'alertPage.newOrEdit.unhealthy'}}
        </label>
      {{else if (or (eq model._targetType 'node') (eq model._targetType 'nodeSelector'))}}
        <label class="acc-label pr-20">
          {{radio-button selection=model.nodeRule.condition value="notready"}} {{t 'alertPage.newOrEdit.notReady'}}
        </label>
        <label class="acc-label pr-10">
          {{radio-button selection=model.nodeRule.condition value="cpu"}} {{t 'alertPage.newOrEdit.cpuUsage'}}
        </label>
        <div style="display:inline-block;width:60px;">
          {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.nodeRule.condition 'cpu')
              min=1
              value=model.nodeRule.cpuThreshold
          }}
        </div>%

        <label class="ml-20 acc-label pr-20">
          {{radio-button selection=model.nodeRule.condition value="mem"}} {{t 'alertPage.newOrEdit.memUsage'}}
        </label>
        <div style="display:inline-block;width:60px;">
          {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.nodeRule.condition 'mem')
              min=1
              max=100
              value=model.nodeRule.memThreshold
          }}
        </div>%
      {{/if}}
      </div>
    {{/if}}
  </section>

  <section class="row">
    <div class="col span-1 text-right">
      {{t 'alertPage.newOrEdit.sendA'}}
    </div>
    <div class="col span-10">
      <label class="acc-label mr-10">{{radio-button selection=model.severity value="critical"}} {{t 'alertPage.newOrEdit.critical'}}</label>
      <label class="acc-label mr-10">{{radio-button selection=model.severity value="warning"}} {{t 'alertPage.newOrEdit.warning'}}</label>
      <label class="acc-label mr-10">{{radio-button selection=model.severity value="info"}} {{t 'alertPage.newOrEdit.info'}}</label>
    </div>
  </section>
</div>
